<template>

  <van-tabbar  route :z-index="999" v-model="active">
    <van-tabbar-item to="/home" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">分类</van-tabbar-item>

    <van-tabbar-item   icon="add-o" @click="showPopup" >发布</van-tabbar-item>

    <van-tabbar-item to="/discover" :info="cartNum==0?null:cartNum"
                     icon="browsing-history-o">发现</van-tabbar-item>
    <van-tabbar-item to="/my" icon="contact">我的</van-tabbar-item>


    <van-popup v-model="show"  close-icon-position="top-left" position="bottom" :style="{ height: '100%' }" @close="close()">
      <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" class="right" size="small" round>发布</van-button>
      <van-button  class="left" size="small" round @click="close">取消</van-button>
      <van-field
        v-model="message"
        rows="1"
        autosize
        type="textarea"
        maxlength="40"
        placeholder="请输入标题"
        show-word-limit
      />
      <van-field
        v-model="message2"
        rows="15"
        autosize
        type="textarea"
        placeholder="请输入内容"
      >
      </van-field>
      <div class="special-area">
        <van-tag plain round type="default" size="medium" ><van-icon name="plus" />添加专区</van-tag>
      </div>
      <div class="special-area">
        <!--<van-icon name="photo-o" size="25px"/>-->
        <van-uploader v-model="fileList"  :max-count="3" :after-read="afterRead"/>
      </div>
    </van-popup>

  </van-tabbar>
</template>

<script>
  import { Dialog } from 'vant';
  import {mapGetters} from 'vuex'
    export default {
        name: "foot-tabs",
        data(){
          return{
            show: false,
            active:0,
            message:"",
            message2:"",
            fileList: [],
          }
        },
        computed:{
          ...mapGetters(['cartNum']),
        },
      methods: {
        showPopup() {
          this.show = true;
        },
        close(){
          if (this.message!="" || this.message2!="" || this.fileList!="") {
            function beforeClose(action, done) {
              if (action === 'confirm') {
                setTimeout(done, 1000);
              } else {
                done();
              }
            }

            Dialog.confirm({
              title: '标题',
              message: '弹窗内容',
              beforeClose,
            }) .then(() => {
              console.log("then");
              this.message="";
              this.message2="";
              this.fileList=[];
              this.show=false;
            }).catch(() => {
                console.log("catch");
              this.show=true;
              });
          }
          this.show=false;
        },
        afterRead(file) {
          // 此时可以自行将文件上传至服务器
          console.log(file)
          console.log(this.fileList)
        },
      }

    }
</script>

<style scoped>
  .right{
    float:right;
    margin: 13px;
  }
  .left{
    float:left;
    margin: 13px;
  }
  .special-area{
    margin: 13px;

  }
</style>
